<template>
  <div class="page-container">
    <formHeader @handleForm="handleForm"></formHeader>
    <div style="margin-bottom: 20px">
      <el-button @click="addStudents">新增值班人员</el-button>
      <el-button @click="messageFn">批量删除</el-button>
    </div>
    <tableCmp :product-data="productData" :header-data="headerData">
      <template #controls>
        <el-table-column fixed="right" label="操作" width="200">
          <template #default="scope">
            <div style="display: flex">
              <el-button size="small">查看</el-button>
              <el-button size="small">编辑</el-button>
              <el-button size="small" @click="messageFn">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </template>
    </tableCmp>
    <el-pagination
      background
      layout="prev, pager, next, jumper,->,total, sizes"
      :total="total"
      v-model:page-size="data.limit"
      @current-change="currentChange"
      :page-sizes="[10, 15, 20, 25]"
    />
    <dialogMask
      :dialog-form-visible="dialogFormVisible"
      :rule-form="ruleForm"
    ></dialogMask>
  </div>
</template>
<script setup>
/**
 * 模块引入
 */
import { reactive, ref, watch, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { studentState } from "../../api/modules/home";
import tableCmp from "../../components/tableData.vue";
import dialogMask from "../../components/dialogTable.vue";
import formHeader from "../../components/formHeader.vue";
import { ElMessage } from "element-plus";
const router = useRouter();
const route = useRoute();
/**
 * 数据
 */
const dialogFormVisible = ref(false);
const ruleForm = ref({});
const headerData = ref([
  {
    key: "stuNo",
    label: "ID",
    type: "",
    width: "50",
  },
  {
    key: "stuName",
    label: "值班人员",
    type: "",
    width: "",
  },
  {
    type: "img",
    key: "image",
    label: "监控实时图",
    width: "",
  },
  {
    key: "bourn",
    label: "监控分布位置",
    width: "",
  },
  {
    type: "status",
    key: "switch",
    label: "门禁情况",
    width: "",
    inactiveContent: "未打卡",
    activeContent: "已打卡",
  },
  {
    key: "expertiseName",
    label: "班级人数",
    width: "",
  },
  {
    key: "",
    label: "操作",
    slot: "controls",
    width: "150",
    type: "fixed",
  },
]);
const limit = ref(10);
const skip = ref(1);
const total = ref(0);
const data = ref({
  limit: limit.value,
  skip: skip.value,
  stuName: "",
});
const optionsData = {
  origin: null,
  collegeId: null,
  workCity: "",
};

/**
 * 功能方法
 */
const productData = ref([]);
const productList = async () => {
  let res = await studentState(data.value);
  // let res = await studentsDistrile();
  productData.value = res.data.data.result[0].list;
  total.value = res.data.data.result[0].list.length;
  // console.log(res.data, "1213321");
};

const handleForm = (formInline) => {
  data.value = Object.assign({}, data.value, formInline);
  console.log("参数", formInline);
  optionsData.collegeId = formInline.collegeId;
  optionsData.origin = formInline.origin;
  optionsData.workCity = formInline.workCity;
  productList();
};
function addStudents() {
  dialogFormVisible.value = true;
  console.log(111);
}

function currentChange(val) {
  console.log(val);
  data.value.skip = val;
  productList();
}
const messageFn = () => {
  ElMessage({
    message: "删除成功",
    type: "success",
  });
};

watch([() => data.value.limit, () => data.value.skip], () => {
  console.log("监听");
  productList();
});
onMounted(() => {
  productList();
});
</script>
<style lang="less" scoped>
.el-button {
  background: #4060c7;
  color: white;
  border-radius: 5px;
}
</style>
